<template>
	<view class="class_open_index" @click="toDetail">
		<view class="title u-flex u-flex-items-center">
			<view>
				<tag color="#033FFF" borderColor="#E8F3FF" background="#E8F3FF" :text="course.field?.name"></tag>
			</view>
			<view class="_title u-line-1">
				{{ course.title }}
			</view>
		</view>
		<view class="sub-title u-m-t-20">
			开课时间：{{ course.startAt }}
		</view>
		<view class="sub-title u-m-t-20">
			开课地址：{{ course.city }} - {{ course.address }}
		</view>
		<u-divider></u-divider>
		<view class="u-flex  u-flex-between u-flex-items-center">
			<teacher-icon-text :name="course.teacher?.name" />
			<view>
				<u-button v-if="course.state != 'Doing' && course.state != 'End'" text="报名" size="small" shape="circle"
					:customStyle="{
					width: '68px'
				}" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
				<tag v-if="course.state == 'Doing'" text="进行中" background="#FFF3E8" color="#F77234" :size="10"></tag>
				<tag v-if="course.state == 'End'" text="已结束" :size="10"></tag>
			</view>
		</view>
	</view>
</template>

<script setup>
	import tag from "@/components/common/tag.vue"
	import teacherIconText from "@/components/common/teacher-icon-text.vue"
	import {
		defineProps
	} from 'vue';

	const props = defineProps({
		course: Object
	})

	function toDetail() {
		uni.navigateTo({
			url: `/subPackages/class/open_detail?id=${props.course.id}`
		})
	}
</script>

<style lang="scss" scoped>
	.class_open_index {
		background-color: #fff;
		border-radius: 6px;
		padding: 12px;
		margin-bottom: 12px;

		.title {
			._title {
				font-size: 16px;
				font-weight: bold;
			}
		}

		.sub-title {
			color: #888;
			font-size: 12px;
		}

	}
</style>